<template>
  <el-container>
    <el-header>
      <headers :activeIndex="activeIndex"></headers>
    </el-header>
    <el-main>
      <el-row>
        <el-col :offset="2" :span="20" style="margin-top:1rem;">
          <el-table :data="users" style="width: 100%">
            <el-table-column prop="username" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="180">
            </el-table-column>
            <el-table-column prop="money" label="余额" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="注册时间">
            </el-table-column>
            <el-table-column prop="ordercount" label="下单数">
            </el-table-column>
            <el-table-column prop="payedordercount" label="付款单数">
            </el-table-column>
            <el-table-column prop="totalpay" label="总消费金额">
            </el-table-column>
            <el-table-column prop="recentLoginTime" label="最近登陆时间">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="2" :span="20" style="margin-top:1rem;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[20, 40, 60, 80]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  import headers from '@/components/headers.vue'
  import axios from 'axios'
  export default {
    data: function () {
      return {
        activeIndex: '4',
        users: [],

        page: 1,
        limit: 20,
        total: 0
      }
    },
    components: {
      headers
    },
    methods: {
      handleSizeChange(val) {
        this.limit = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getData()
      },
      getData() {
        axios.get(this.$store.state.base_url + "/user/statistics?page=" + this.page + "&limit=" + this.limit).then(
          data => {
            console.log(data.data)
            if (data.data.code == "SUCCESS") {
              this.users = data.data.data.data
              console.log(this.users)
              this.page = data.data.data.page.page
              this.limit = data.data.data.page.limit
              this.total = data.data.data.page.total
            }
          })
      }
    },
    created() {
      this.getData()
    }
  }
</script>


<style scoped>

</style>